<template>
  <div>
    <!-- 任务中心弹窗 -->
    <el-dialog
      title="任务中心"
      :visible.sync="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
      custom-class="task-center-dialog"
      :append-to-body="true">
      <div class="task-center-content">
        <!-- 任务分类标签页 -->
        <el-tabs v-model="activeTaskTab">
          <el-tab-pane label="全部任务" name="all">
            <div class="task-list">
              <el-table :data="allTasks" class="task-list">
                <el-table-column prop="taskName" label="任务名称" width="200">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="160">
                </el-table-column>
                <el-table-column prop="progress" label="进度" width="200">
                  <template slot-scope="scope">
                    <div class="progress-cell">
                      <el-progress 
                        :percentage="scope.row.progress" 
                        :status="getProgressStatus(scope.row.progress)"
                        :stroke-width="6"
                        :show-text="false">
                      </el-progress>
                      <span class="progress-text">{{scope.row.progress}}%</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="100">
                  <template slot-scope="scope">
                    <el-tag :type="scope.row.status === '已完成' ? 'success' : scope.row.status === '进行中' ? 'primary' : scope.row.status === '失败' ? 'danger' : 'warning'">
                      {{ scope.row.status }}
                      <el-tooltip v-if="scope.row.status === '失败' && scope.row.failReason" effect="dark" :content="scope.row.failReason" placement="top" :open-delay="300">
                        <i class="el-icon-warning-outline" style="margin-left: 3px;"></i>
                      </el-tooltip>
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                  <template slot-scope="scope">
                    <div class="task-btn-container">
                      <!-- 进行中状态显示暂停和删除按钮 -->
                      <template v-if="scope.row.status === '进行中'">
                        <div class="double-buttons">
                          <el-button size="mini" type="text" style="color: #E6A23C" @click="handleTaskPause(scope.row)">暂停</el-button>
                          <el-button size="mini" type="text" style="color: #F56C6C" @click="handleTaskDelete(scope.row)">删除</el-button>
                        </div>
                      </template>
                      
                      <!-- 等待中状态显示开始和删除按钮 -->
                      <template v-else-if="scope.row.status === '等待中'">
                        <div class="double-buttons">
                          <el-button size="mini" type="text" style="color: #409EFF" @click="handleTaskStart(scope.row)">开始</el-button>
                          <el-button size="mini" type="text" style="color: #F56C6C" @click="handleTaskDelete(scope.row)">删除</el-button>
                        </div>
                      </template>
                      
                      <!-- 失败或已完成状态只显示删除按钮 -->
                      <template v-else>
                        <div class="single-button">
                          <el-button size="mini" type="text" style="color: #F56C6C" @click="handleTaskDelete(scope.row)">删除</el-button>
                        </div>
                      </template>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

          <el-tab-pane label="进行中" name="inProgress">
            <div class="task-list">
              <el-table :data="getTasksByStatus('进行中')" style="width: 100%">
                <el-table-column prop="taskName" label="任务名称" width="200">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="160">
                </el-table-column>
                <el-table-column prop="progress" label="进度" width="200">
                  <template slot-scope="scope">
                    <div class="progress-cell">
                      <el-progress 
                        :percentage="scope.row.progress" 
                        :status="getProgressStatus(scope.row.progress)"
                        :stroke-width="6"
                        :show-text="false">
                      </el-progress>
                      <span class="progress-text">{{scope.row.progress}}%</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="100">
                  <template slot-scope="scope">
                    <el-tag type="primary">{{ scope.row.status }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                  <template slot-scope="scope">
                    <div class="task-btn-container">
                      <div class="double-buttons">
                        <el-button size="mini" type="text" style="color: #E6A23C" @click="handleTaskPause(scope.row)">暂停</el-button>
                        <el-button size="mini" type="text" style="color: #F56C6C" @click="handleTaskDelete(scope.row)">删除</el-button>
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

          <el-tab-pane label="等待中" name="waiting">
            <div class="task-list">
              <el-table :data="getTasksByStatus('等待中')" style="width: 100%">
                <el-table-column prop="taskName" label="任务名称" width="200">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="160">
                </el-table-column>
                <el-table-column prop="progress" label="进度" width="200">
                  <template slot-scope="scope">
                    <div class="progress-cell">
                      <el-progress 
                        :percentage="scope.row.progress" 
                        :status="getProgressStatus(scope.row.progress)"
                        :stroke-width="6"
                        :show-text="false">
                      </el-progress>
                      <span class="progress-text">{{scope.row.progress}}%</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="100">
                  <template slot-scope="scope">
                    <el-tag type="warning">{{ scope.row.status }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                  <template slot-scope="scope">
                    <div class="task-btn-container">
                      <div class="double-buttons">
                        <el-button size="mini" type="text" style="color: #409EFF" @click="handleTaskStart(scope.row)">开始</el-button>
                        <el-button size="mini" type="text" style="color: #F56C6C" @click="handleTaskDelete(scope.row)">删除</el-button>
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

          <el-tab-pane label="失败" name="failed">
            <div class="task-list">
              <el-table :data="getTasksByStatus('失败')" style="width: 100%">
                <el-table-column prop="taskName" label="任务名称" width="170">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="170">
                </el-table-column>
                <el-table-column prop="progress" label="进度" width="170">
                  <template slot-scope="scope">
                    <div class="progress-cell">
                      <el-progress 
                        :percentage="scope.row.progress" 
                        :status="'exception'"
                        :stroke-width="6"
                        :show-text="false">
                      </el-progress>
                      <span class="progress-text">{{scope.row.progress}}%</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="failReason" label="失败原因" width="150">
                  <template slot-scope="scope">
                    <div class="fail-reason-cell">
                      <el-tooltip effect="dark" :content="scope.row.failReason" placement="top" :open-delay="300">
                        <div class="ellipsis-text">{{ scope.row.failReason }}</div>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="80">
                  <template slot-scope="scope">
                    <div class="task-btn-container">
                      <div class="single-button">
                        <el-button size="mini" type="text" style="color: #F56C6C" @click="handleTaskDelete(scope.row)">删除</el-button>
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

          <el-tab-pane label="已完成" name="completed">
            <div class="task-list">
              <el-table :data="getTasksByStatus('已完成')" style="width: 100%">
                <el-table-column prop="taskName" label="任务名称" width="200">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="160">
                </el-table-column>
                <el-table-column prop="progress" label="进度" width="200">
                  <template slot-scope="scope">
                    <div class="progress-cell">
                      <el-progress 
                        :percentage="scope.row.progress" 
                        :status="getProgressStatus(scope.row.progress)"
                        :stroke-width="6"
                        :show-text="false">
                      </el-progress>
                      <span class="progress-text">{{scope.row.progress}}%</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="100">
                  <template slot-scope="scope">
                    <el-tag type="success">{{ scope.row.status }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="80">
                  <template slot-scope="scope">
                    <div class="task-btn-container">
                      <div class="single-button">
                        <el-button size="mini" type="text" style="color: #F56C6C" @click="handleTaskDelete(scope.row)">删除</el-button>
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'TaskCenter',
  data() {
    return {
      dialogVisible: false,
      activeTaskTab: 'all',
      allTasks: [
        {
          taskName: '测试任务1',
          createTime: '2024-03-20 10:00:00',
          progress: 30,
          status: '进行中'
        },
        {
          taskName: '测试任务2',
          createTime: '2024-03-20 11:00:00',
          progress: 100,
          status: '已完成'
        },
        {
          taskName: '测试任务3',
          createTime: '2024-03-20 14:00:00',
          progress: 0,
          status: '等待中'
        },
        {
          taskName: '测试任务4',
          createTime: '2024-03-21 09:30:00',
          progress: 45,
          status: '失败',
          failReason: '接口连接超时，无法获取测试数据，请检查网络连接或服务器状态后重试。错误代码：E4001'
        }
      ]
    }
  },
  mounted() {
    // 组件挂载完成后，初始化一次角标计数
    this.$nextTick(() => {
      this.updateBadgeCount();
    });
  },
  methods: {
    // 显示任务中心弹窗
    showTaskCenter() {
      this.dialogVisible = true;
    },
    // 关闭任务中心弹窗
    closeTaskCenter() {
      this.dialogVisible = false;
    },
    // 获取活跃任务数量（进行中、等待中和失败状态的任务总数）
    getActiveTaskCount() {
      return this.allTasks.filter(task => task.status === '进行中' || task.status === '等待中' || task.status === '失败').length;
    },
    // 获取进度状态
    getProgressStatus(progress) {
      if (progress === 100) return 'success';
      return '';
    },
    // 根据状态筛选任务
    getTasksByStatus(status) {
      return this.allTasks.filter(task => task.status === status);
    },
    // 暂停任务
    handleTaskPause(task) {
      task.status = '等待中';
      this.$message.success('任务已暂停');
      this.updateBadgeCount();
    },
    // 开始任务
    handleTaskStart(task) {
      task.status = '进行中';
      this.$message.success('任务已开始');
      this.updateBadgeCount();
    },
    // 删除任务
    handleTaskDelete(task) {
      const index = this.allTasks.findIndex(t => t === task);
      if (index > -1) {
        this.allTasks.splice(index, 1);
      }
      this.$message.success('任务已删除');
      this.updateBadgeCount();
    },
    // 重试失败任务
    handleTaskRetry(task) {
      task.status = '进行中';
      task.progress = 0;
      task.failReason = '';
      this.$message.success('任务已重新开始执行');
      this.updateBadgeCount();
    },
    // 标记任务失败
    handleTaskFail(task, reason = '未知错误') {
      task.status = '失败';
      task.failReason = reason;
      this.$message.error('任务执行失败: ' + reason);
      this.updateBadgeCount();
    },
    // 更新父组件的角标计数
    updateBadgeCount() {
      // 触发自定义事件，通知父组件更新角标
      this.$emit('badge-update');
    }
  }
}
</script>

<style scoped>
/* 任务中心弹窗样式 */
.task-center-dialog {
  border-radius: 8px;
}

.task-center-content {
  min-height: 400px;
}

.task-list {
  width: 100%;
}

/* 进度条单元格样式 */
.progress-cell {
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.progress-text {
  min-width: 40px;
  text-align: right;
  font-size: 13px;
  color: #606266;
}

/* 任务失败原因样式 */
.fail-reason-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 5px;
  width: 100%;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

.ellipsis-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: left;
}

/* 任务按钮容器样式 */
.task-btn-container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.single-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.double-buttons {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-left: 10px;
}

/* 按钮样式 */
.task-btn-container .el-button {
  margin: 0;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  line-height: 1;
  vertical-align: middle;
  position: relative;
  min-width: 32px;
  white-space: nowrap;
}

.task-btn-container .el-button + .el-button {
  margin-left: 4px;
}

/* 表格相关样式 */
::v-deep .el-table th,
::v-deep .el-table td {
  text-align: center !important;
  padding: 8px 2px;
}

::v-deep .el-table th > .cell,
::v-deep .el-table td > .cell {
  text-align: center !important;
}

::v-deep .el-table__row td {
  vertical-align: middle !important;
  height: 48px;
}

::v-deep .el-progress-bar__outer {
  height: 6px !important;
  background-color: #EBEEF5;
}

::v-deep .el-progress-bar__inner {
  transition: width 0.3s ease;
}
</style>

